<template>
  <div class="person">
    <div class="btnM">注册</div>
    <div style="clear:both;"></div>
    <h1>注册</h1>
    <mt-field :attr="{ minlength: 3}" label="用户名" placeholder="请输入用户名" v-model="userName"></mt-field>
    <mt-field :attr="{ minlength: 6}" label="密码" placeholder="请输入密码" type="password" v-model="password"></mt-field>
    <mt-field :attr="{ minlength: 6}" label="确认密码" placeholder="请再次输入密码" type="password" v-model="password1"></mt-field>
    <router-link :to="{ name: 'login'}" class="haha">已有账号，我要登陆</router-link>
    <mt-button @click="registClick()" size="large" type="primary" class="btnC">注册</mt-button>
  </div>
</template>

<script>
import { Field } from 'mint-ui';
import { Toast } from 'mint-ui'
import { regist } from '../services/product_type';

export default {
  name: 'Person',
  data() {
    return {
      userName: '',
      password: '',
      password1: '',
    };
  },
  methods: {
    registClick() {
      if (this.userName === '') {
        Toast({
          message: '用户名不能为空',
          position: 'middle',
          duration: 2000
        });
        return;
      }
      console.log('aaaaaaaaa')
      if (this.password === '') {
        Toast({
          message: '密码不能为空',
          position: 'middle',
          duration: 2000
        });
        return;
      }
      if (this.password1 === '') {
        Toast({
          message: '请再次输入密码',
          position: 'middle',
          duration: 2000
        });
        return;
      }
      if (this.password != this.password1) {
        Toast({
          message: '两次密码输入不一致',
          position: 'middle',
          duration: 2000
        });
        return;
      }
      regist({
        userName: this.userName,
        password: this.password
      })
      .then((res) => {
        if (res.data.status == 'Y') {
          this.$router.push({
          name: 'login',
        })
        } else {
          Toast({
          message: res.data.msg,
          position: 'middle',
          duration: 5000
        });
        }
      })
    },
  },
};
</script>
<style>
.person{
  text-align: center;
}
.haha{
  float: right;
  text-decoration: none;
  font-size: 0.6rem;
}
.btnC{
  margin-top: 5rem;
}
.btnM{
  float: left;
  width: 3rem;
  font-size: 0.6rem;
  background-color: rgb(244, 244, 244);
}
</style>

